<template>
  <div class="wrap">
    <el-card class="sendRecordCard" shadow="always">
      <template #header>
        <div class="cardHeader">
          <div class="cardHeader__title">
            <img class="titleIcon" src="@/assets/images/titleIcon.png" />
            <span>下发详情</span>
          </div>
          <el-button class="button" text :icon="Back" @click="_back">返回</el-button>
        </div>
      </template>
      <el-table class="cardCon" :data="tableData" style="width: 100%">
        <el-table-column prop="objectStyleText" label="故障类型" align="center" />
        <el-table-column prop="dataName" label="故障名称" align="center" />
        <el-table-column prop="deviceName" label="装置名称" align="center" />
        <el-table-column prop="stationName" label="表位名称" align="center" />
        <el-table-column prop="sendStatusText" label="下发状态" align="center" />
        <el-table-column prop="failMsg" label="下发失败原因" align="center" />
      </el-table>
    </el-card>
  </div>
</template>
<script setup lang="tsx" name="sendRecordDtl">
import { nextTick, onMounted, ref } from "vue";
import { getSendRecordDtl } from "@/api/modules/exam1Manage/examControl";
import { Back } from "@element-plus/icons-vue";
import { ElLoading } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { ResultData } from "@/api/interface";
const route = useRoute();
const router = useRouter();
const tableData: any = ref([]);

/**
 * 返回上一页
 */
const _back = () => {
  router.back();
};
/**
 * 获取下发记录详情
 */
const getSendRecord = async (params: any) => {
  let { result } = (await getSendRecordDtl(params)) as ResultData;
  const loadingInstance = ElLoading.service({ fullscreen: true, text: "下发中,请耐心等待" });
  if (result.sendStatus === 1) {
    setTimeout(() => {
      getSendRecord(params);
    }, 5000);
    return false;
  }
  if (result.sendStatus === 2) {
    nextTick(() => {
      // Loading should be closed asynchronously
      loadingInstance.close();
    });
    result.dataList.forEach((item: any) => {
      switch (item.objectStyle) {
        case 2:
          item.objectStyleText = "线路故障";
          break;
        case 4:
          item.objectStyleText = "采集终端故障";
          break;
        case 5:
          item.objectStyleText = "电能表故障";
          break;
        default:
          break;
      }
      switch (item.sendStatus) {
        case 0:
          item.sendStatusText = "下发中";
          break;
        case 1:
          item.sendStatusText = "下发成功";
          break;
        case 2:
          item.sendStatusText = "下发失败";
          break;
        default:
          break;
      }
    });
    tableData.value = result.dataList;
  }
};
onMounted(() => {
  console.log(route.params);
  const testId = route.params.controlId;
  getSendRecord({ testId });
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
